<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
    <th:block th:include="include :: head('消息与提示')" />
</head>
<body class="app sidebar-mini rtl index_body">

    <div class="app-title">
        <div class="div">
            <h1><i class="fa fa-laptop"></i> Layer</h1>
        </div>

    </div>
    <!-- Buttons-->
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">alert</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.alert('只想简单的提示');">只想简单的提示</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 0});"> 加了个图标0</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 1});"> 加了个图标1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 2});"> 加了个图标2</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 3});"> 加了个图标3</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 4});"> 加了个图标4</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 5});"> 加了个图标5</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('加了个图标(0-6)', {icon: 6});"> 加了个图标6</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('有了回调',
                                    function (index) {
                                        alert('this is a callback');
                                        layer.close(index);
                                    });
                            ">有了回调</button>
                </p>

            </div>
        </div>

    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">msg</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.msg('只想弱弱提示');">只想弱弱提示</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('有表情地提示', {icon: 6});"> 有表情地提示</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('关闭后想做些什么',
                                    function () {
                                        alert('I will tell you a message');
                                    });
                            "> 关闭后想做些什么</button>
                    <button class="btn btn-primary" type="button" onclick="
                            layer.msg('关闭后想做些什么', {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            },
                                    function () {
                                        alert('I will tell you a message');
                                    });"> 2秒关闭（如果不配置，默认是3秒）</button>
                </p>
            </div>
        </div>

    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">load</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="var index = layer.load(0, {time: 5 * 1000});">简单load-0，5秒</button>
                    <button class="btn btn-primary" type="button" onclick="var index = layer.load(1, {time: 5 * 1000});">简单load-1，5秒</button>
                    <button class="btn btn-primary" type="button" onclick="var index = layer.load(2, {time: 5 * 1000});">简单load-2，5秒</button>
                </p>
            </div>
        </div>

    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">type</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 0})">0（信息框，默认）</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 1})">1（页面层）</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2})">2（iframe层）</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 3, time: 3000})">3（加载层）</button>
                    <button id="tipbtn" class="btn btn-primary" type="button" onclick="layer.open({type: 4, content: ['内容', '#tipbtn']})">4（tips层）</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">title</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 0})">默认</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 0, title: false})">关闭标题</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 0, title: '我是标题'})">自定标题</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 0, title: ['文本', 'font-size:24px;color:red;']})">自定css</button>
                </p>
            </div>
        </div>
    </div>

    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">content</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                type: 1,
                                title: true,
                                content: '传入任意的文本或html,type=1' //这里content是一个普通的String
                            });">传入任意的文本或html,type=1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                type: 1,
                                title: true,
                                content: $('#tipbtn')
                            });">这里content是一个DOM,type=1</button>
                    <button class="btn btn-primary" type="button" onclick="$.post('/demo/charts', {}, function (str) {
                                layer.open({
                                    type: 1,
                                    content: str //注意，如果str是object，那么需要字符拼接。
                                });
                            });">ajax获取内容,type=1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                type: 2,
                                content: '/demo/charts' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                            });
                            ">iframe,type=2</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">skin </h2>
                </div>
            </div>
        </div>
        <style>
            body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
            body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
            body .demo-class .layui-layer-btn a{background:#333;}
            body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
        </style>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写skin</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({skin: 'layui-layer-lan'});">内置layui-layer-lan</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({skin: 'layui-layer-molv'});">内置layui-layer-molv</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({skin: 'demo-class'});">自定义demo-class</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">area </h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，自动</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({area: '500px'});">只写宽度</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({area: ['400px', '400px']});">宽高都写</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">offset</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，自动</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'auto'});">auto</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: '100px'});">只定义top坐标，水平保持居中</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: ['100px', '50px']});">同时定义top、left坐标</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 't'});">快捷设置顶部坐标</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'r'});">快捷设置右边缘坐标</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'b'});">快捷设置底部坐标</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'l'});">快捷设置左边缘坐标</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'lt'});">快捷设置左上角</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'lb'});">快捷设置左下角</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'rb'});">快捷设置右上角</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({offset: 'rb'});">快捷设置右下角</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">icon - 图标：信息框和加载层的私有参数 </h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，自动</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({area: '500px'});">只写宽度</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({area: ['400px', '400px']});">宽高都写</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">btn - 按钮</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，自动</button>
                    <button class="btn btn-primary" type="button" onclick="layer.confirm('您是如何看待前端开发？');">普通的confirm</button>
                    <button class="btn btn-primary" type="button" onclick="layer.confirm('您是如何看待前端开发？', {
                                btn: ['重要', '奇葩'] //按钮
                            }, function () {
                                layer.msg('的确很重要', {icon: 1});
                            }, function () {
                                layer.msg('也可以这样', {
                                    time: 20000, //20s后自动关闭
                                    btn: ['明白了', '知道了']
                                });
                            });">options外面写按钮回掉</button>
                    <button class="btn btn-primary" type="button" onclick="layer.confirm('纳尼？', {
                                btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
                                , yes: function (index, layero) {
                                    alert('按钮一');
                                }, btn2: function (index) {
                                    alert('按钮二');
                                    return false;
                                }

                                , btn3: function (index, layero) {
                                    alert('按钮三');
                                    return false;
                                }
                            });">options里面写按钮回掉</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                content: 'test'
                                , btn: ['按钮一', '按钮二', '按钮三']
                                , yes: function (index, layero) {
                                    alert('按钮一');
                                    return false;
                                }
                                , btn2: function (index, layero) {
                                    alert('按钮二');
                                    return false;
                                }
                                , btn3: function (index, layero) {
                                    alert('按钮三');
                                    return false;
                                }
                                , cancel: function () {
                                    alert('cancel');
                                }
                            });">普通信息框，第二个例子</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">btnAlign - 按钮排列</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，自动</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({btnAlign: 'l'});">按钮左对齐</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({btnAlign: 'c'});">按钮居中对齐</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({btnAlign: 'r'});">按钮右对齐。默认值，不用设置</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">closeBtn - 关闭按钮</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，默认：1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({closeBtn: 0});">0不显示</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({closeBtn: 1});">1默认风格</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({closeBtn: 2});">2另一种风格</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">shade - 遮罩</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，默认：1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({shade: [0.8, '#393D49']});">自定义透明度与颜色</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({shade: 0});">不显示</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">shadeClose - 是否点击遮罩关闭</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({});">不写，默认：false</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({shadeClose: true});">true</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">anim - 弹出动画</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 0, area: ['400px', '400px'], shadeClose: true});">平滑放大。默认</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 1, area: ['400px', '400px'], shadeClose: true});">从上掉落</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 2, area: ['400px', '400px'], shadeClose: true});">从最底部往上滑入</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 3, area: ['400px', '400px'], shadeClose: true});">从左滑入</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 4, area: ['400px', '400px'], shadeClose: true});">从左翻滚</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 5, area: ['400px', '400px'], shadeClose: true});">渐显</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 6, area: ['400px', '400px'], shadeClose: true});">抖动</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">isOutAnim - 关闭动画 （layer 3.0.3新增）</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({anim: 0, area: ['400px', '400px'], shadeClose: true});">默认:true</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({isOutAnim: false, anim: 1, area: ['400px', '400px'], shadeClose: true});">false</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">maxmin - 最大最小化</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 1});">默认:false</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 1, maxmin: true});">true</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">fixed - 固定</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, fixed: true});">默认:true</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, fixed: false});">false</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">resize - 是否允许拉伸</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, resize: true});">默认:true</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, resize: false});">false</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">resizing - 监听窗口拉伸动作</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, resize: true, resizing: function (layero) {
                                    console.log(layero);
                                }
                            });">默认:true</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">scrollbar - 是否允许浏览器出现滚动条</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, scrollbar: true});">默认:true</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, scrollbar: false});">false</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">maxWidth - 最大宽度<i class="fas fa-heart danger">没看出效果</i></h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({type: 2, area: 'auto', maxmin: true, maxWidth: 600});"> area:'auto',maxWidth:600</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">内置回调</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                content: '测试回调',
                                success: function (layero, index) {
                                    console.log(layero, index);
                                }
                            });
                            ">success - 层弹出后的成功回调方法</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                content: '测试回调',
                                yes: function (index, layero) {
                                    //do something
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                }
                            });
                            ">yes - 确定按钮回调方法</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                content: '测试回调',
                                cancel: function (index, layero) {
                                    if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
                                        layer.close(index)
                                    }
                                    return false;
                                }
                            });
                            ">cancel - 右上角关闭按钮触发的回调</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                content: '测试回调',
                                end: function () {
                                    alert();
                                    console.log(this);
                                }
                            });
                            ">end - 层销毁后触发的回调</button>
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                type: 2,
                                maxmin: true,
                                content: 'http://www.baidu.com',
                                full: function () {
                                    alert('full');
                                    console.log(this);
                                },
                                min: function () {
                                    alert('min');
                                    console.log(this);
                                },
                                restore: function () {
                                    alert('restore');
                                    console.log(this);
                                }
                            });
                            ">full/min/restore -分别代表最大化、最小化、还原 后触发的回调</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">layer快捷方法</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({content: 'test'});">layer.open(options) - 原始核心方法</button>
                    <button class="btn btn-primary" type="button" onclick="layer.alert('有了图标和回调', {icon: 1}, function (index) {
                                //do something
                                alert('有了回调');
                                layer.close(index);
                            });
                            ">layer.alert(content, options, yes) - 普通信息框</button>
                    <button class="btn btn-primary" type="button" onclick="layer.confirm('is not?', {icon: 3, title: '提示'},
                                    function (index) {
                                        alert('yes');
                                        layer.close(index);
                                    }, function (index) {
                                alert('cancel');
                                layer.close(index);
                            });">layer.confirm(content, options, yes, cancel) - 询问框</button>
                </p>
            </div>
        </div>
    </div>
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">layer中iframe的方法</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.open({
                                type: 2,
                                content: 'demoIframe',
                                maxmin: true,
                                btn: ['bt1', 'bt2', 'bt3'],
                                success: function (layero, index) {
//                                    var body = layer.getChildFrame('body', index);
//                                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
//                                    console.log(body.html()) //得到iframe页的body内容
//                                    body.find('input').val('Hi，我是从父页来的')
                                }, yes: function ( index,layero) {
                                    var body = layer.getChildFrame('body', index);
                                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                                    iframeWin.someMethod('fdc');
//                                    console.log(body.html()) //得到iframe页的body内容
                                    body.find('input').val('Hi，我是从父页来的')
                                    return false;
                                },btn2:function(index,layero){
                                    layer.iframeSrc(index, 'http://www.baidu.com');
                                    return false;
                                }
                            });
                            ">layer.getChildFrame(selector, index) - 获取iframe页的DOM,可操纵对象，执行js方法</button>

                </p>
            </div>
        </div>
    </div>
    <div th:replace="include :: footer"></div>
    <!-- The javascript plugin to display page loading on top-->
    <!--<script src="js/plugins/pace.min.js"></script>-->
    <!-- Page specific javascripts-->
    <script>
//页面一打开就执行弹层
        layer.ready(function () {
            layer.msg('很高兴一开场就见到你', {icon: 0});
        });
    </script>

</body>
</html>